<template>
  <div class="app">
    <!-- 主题切换工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <span class="toolbar-label">主题模式：</span>
        <button 
          :class="{ active: darkMode === 'auto' }"
          @click="darkMode = 'auto'"
        >
          🌓 自动
        </button>
        <button 
          :class="{ active: darkMode === false }"
          @click="darkMode = false"
        >
          ☀️ Light
        </button>
        <button 
          :class="{ active: darkMode === true }"
          @click="darkMode = true"
        >
          🌙 Dark
        </button>
      </div>
      <div class="toolbar-right">
        <span class="toolbar-info">
          当前: {{ darkMode === 'auto' ? '自动' : (darkMode ? 'Dark' : 'Light') }}
        </span>
      </div>
    </div>

    <!-- 错误提示面板 -->
    <div v-if="renderErrors.length > 0" class="error-panel">
      <div class="error-header">
        <span class="error-title">⚠️ 渲染错误 ({{ renderErrors.length }})</span>
        <button class="error-close" @click="renderErrors = []">×</button>
      </div>
      <div class="error-list">
        <div v-for="(error, index) in renderErrors" :key="index" class="error-item">
          <div class="error-info">
            <span class="error-line">第 {{ error.line }} 行</span>
            <span class="error-type" :class="`error-type-${error.type.toLowerCase()}`">{{ error.type }}</span>
          </div>
          <div class="error-message">{{ error.message }}</div>
          <pre v-if="error.code" class="error-code">{{ error.code }}</pre>
        </div>
      </div>
    </div>
    
    <div class="editor-wrapper">
      <markdown-editor 
        v-model:content="content" 
        :editable="true"
        :datasource="datasource"
        :dark="darkMode"
        @errors="handleRenderErrors"
      />
    </div>
  </div>
</template>

<script>
import MarkdownEditor from './components/MarkdownEditor.vue'
import { datasource } from './utils/dataSource.js'

export default {
  components: {
    MarkdownEditor
  },
  data() {
    return {
      datasource: datasource,
      renderErrors: [],
      darkMode: 'auto', // 'auto' | true | false
      content: `# Markdown 编辑器功能演示

## 1. 基础语法
**粗体文本** *斜体文本* ~~删除线~~
> 这是一段引用文本

## 2. 列表
### 无序列表
- 项目1
- 项目2
  - 子项目2.1
  - 子项目2.2

### 有序列表
1. 第一步
2. 第二步
3. 第三步

## 3. 代码
行内代码 \`console.log('Hello')\`

代码块：
\`\`\`javascript
function hello() {
  console.log('Hello, World!');
}
\`\`\`

## 4. 表格
| 表头1 | 表头2 | 表头3 |
|-------|-------|-------|
| 内容1 | 内容2 | 内容3 |
| 行2列1 | 行2列2 | 行2列3 |

## 5. 脚注
这里有一个脚注[^1]

[^1]: 这是脚注的内容

## 6. Emoji 表情
:smile: :heart: :rocket: :tada: :star:

## 7. 提示框
::: info
这是一个信息提示框
这里可以包含**Markdown**语法
:::

::: success
这是一个成功提示框
✅ 操作已成功完成！
- 支持列表
- 支持其他markdown语法
:::

::: warning
这是一个警告提示框
- 支持列表
- 支持其他markdown语法
:::

::: danger
这是一个危险提示框
\`\`\`js
// 支持代码块
const danger = true;
\`\`\`
:::

## 8. KaTeX 数学公式
行内公式：$E = mc^2$

独立公式：
$$
\\frac{n!}{k!(n-k)!} = \\binom{n}{k}
$$

## 9. Mermaid 图表
\`\`\`mermaid
graph TD
    A[开始] --> B{判断}
    B -->|条件1| C[处理1]
    B -->|条件2| D[处理2]
    C --> E[结束]
    D --> E
\`\`\`

## 10. ECharts 图表
\`\`\`echarts
{
  "title": {
    "text": "ECharts 示例图表"
  },
  "tooltip": {},
  "legend": {
    "data": ["销量"]
  },
  "xAxis": {
    "data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [{
    "name": "销量",
    "type": "bar",
    "data": [5, 20, 36, 10, 10, 20]
  }]
}
\`\`\`

## 11. 任务列表
- [x] 已完成任务
- [ ] 未完成任务
- [x] 支持嵌套
  - [x] 子任务1
  - [ ] 子任务2

## 12. 链接和图片
[链接文本](https://example.com)

![图片描述](https://picsum.photos/200/100)

## 13. 数据集功能演示

### 示例1：销售数据

\`\`\`dataset datasetId: sales_data
{
  dimensions: ["产品", "2020", "2021", "2022"],
  source: [
    {产品: "产品A", 2020: 100, 2021: 120, 2022: 150},
    {产品: "产品B", 2020: 80, 2021: 90, 2022: 110},
    {产品: "产品C", 2020: 60, 2021: 70, 2022: 85},
    {产品: "产品D", 2020: 45, 2021: 55, 2022: 70},
    {产品: "产品E", 2020: 120, 2021: 140, 2022: 165}
  ]
}
\`\`\`

使用数据集绘制柱状图：

\`\`\`echarts
{
  dataset: dataset['sales_data'],
  title: {
    text: "产品销售趋势",
    left: "center"
  },
  tooltip: {
    trigger: "axis"
  },
  legend: {
    data: ["2020", "2021", "2022"],
    top: "10%"
  },
  xAxis: {
    type: "category"
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "2020",
      type: "bar",
      encode: {
        x: "产品",
        y: "2020"
      }
    },
    {
      name: "2021", 
      type: "bar",
      encode: {
        x: "产品",
        y: "2021"
      }
    },
    {
      name: "2022",
      type: "bar", 
      encode: {
        x: "产品",
        y: "2022"
      }
    }
  ]
}
\`\`\`

### 示例2：用户统计数据

\`\`\`dataset datasetId: user_stats
{
  source: [
    ["地区", "用户数", "增长率"],
    ["华东", 1500, 0.15],
    ["华南", 1200, 0.12],
    ["华北", 1800, 0.18],
    ["西南", 800, 0.08],
    ["西北", 600, 0.06]
  ]
}
\`\`\`

使用数据集绘制饼图：

\`\`\`echarts
{
  dataset: dataset['user_stats'],
  title: {
    text: "用户地区分布",
    left: "center"
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  series: [
    {
      name: "用户数",
      type: "pie",
      radius: "50%",
      encode: {
        value: "用户数",
        itemName: "地区"
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
}
\`\`\`

### 示例3：月度数据

\`\`\`dataset datasetId: monthly_finance
{
  dimensions: ["月份", "收入", "支出", "利润"],
  source: [
    {月份: "1月", 收入: 50000, 支出: 35000, 利润: 15000},
    {月份: "2月", 收入: 48000, 支出: 32000, 利润: 16000},
    {月份: "3月", 收入: 52000, 支出: 34000, 利润: 18000},
    {月份: "4月", 收入: 55000, 支出: 36000, 利润: 19000},
    {月份: "5月", 收入: 58000, 支出: 38000, 利润: 20000},
    {月份: "6月", 收入: 60000, 支出: 40000, 利润: 20000}
  ]
}
\`\`\`

使用数据集绘制折线图：

\`\`\`echarts
{
  dataset: dataset['monthly_finance'],
  title: {
    text: "月度财务数据",
    left: "center"
  },
  tooltip: {
    trigger: "axis"
  },
  legend: {
    data: ["收入", "支出", "利润"],
    top: "10%"
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    boundaryGap: false
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "收入",
      type: "line",
      encode: {
        x: "月份",
        y: "收入"
      }
    },
    {
      name: "支出",
      type: "line",
      encode: {
        x: "月份",
        y: "支出"
      }
    },
    {
      name: "利润",
      type: "line",
      encode: {
        x: "月份",
        y: "利润"
      }
    }
  ]
}
\`\`\`

## 14. SQL数据源查询功能演示

### 示例1：基础SQL查询

\`\`\`dataset datasetId: sql_query_1 datasourceId: sales_db
SELECT 产品, 年份, 销售额 FROM sales_data WHERE 销售额 > 100
\`\`\`

使用查询结果绘制图表：

\`\`\`echarts
{
  dataset: dataset['sql_query_1'],
  title: {
    text: \"产品销售趋势\",
    left: \"center\"
  },
  tooltip: {
    trigger: \"axis\"
  },
  legend: {
    data: [\"销售额\"],
    top: \"10%\"
  },
  xAxis: {
    type: \"category\"
  },
  yAxis: {
    type: \"value\"
  },
  series: [
    {
      name: \"销售额\",
      type: \"bar\",
      encode: {
        x: \"产品\",
        y: \"销售额\"
      }
    }
  ]
}
\`\`\`

### 示例2：带聚合函数的SQL查询

\`\`\`dataset datasetId: sql_query_2 datasourceId: sales_db
SELECT 产品, SUM(销售额) as total_sales, AVG(销售额) as avg_sales FROM sales_data GROUP BY 产品
\`\`\`

使用聚合查询结果绘制图表：

\`\`\`echarts
{
  dataset: dataset['sql_query_2'],
  title: {
    text: \"各产品销售总额和平均销售额\",
    left: \"center\"
  },
  tooltip: {
    trigger: \"axis\"
  },
  legend: {
    data: [\"销售总额\", \"平均销售额\"],
    top: \"10%\"
  },
  xAxis: {
    type: \"category\"
  },
  yAxis: [
    {
      type: \"value\",
      name: \"销售总额\",
      position: \"left\"
    },
    {
      type: \"value\",
      name: \"平均销售额\",
      position: \"right\"
    }
  ],
  series: [
    {
      name: \"销售总额\",
      type: \"bar\",
      encode: {
        x: \"产品\",
        y: \"total_sales\"
      }
    },
    {
      name: \"平均销售额\",
      type: \"line\",
      yAxisIndex: 1,
      encode: {
        x: \"产品\",
        y: \"avg_sales\"
      }
    }
  ]
}
\`\`\`

### 示例3：复杂SQL查询

\`\`\`dataset datasetId: sql_query_3 datasourceId: sales_db
SELECT 产品, 年份, 销售额 FROM sales_data ORDER BY 销售额 DESC LIMIT 5
\`\`\`

使用复杂查询结果绘制图表：

\`\`\`echarts
{
  dataset: dataset['sql_query_3'],
  title: {
    text: \"销售额前五产品\",
    left: \"center\"
  },
  tooltip: {
    trigger: \"axis\"
  },
  xAxis: {
    type: \"category\"
  },
  yAxis: {
    type: \"value\"
  },
  series: [
    {
      name: \"销售额\",
      type: \"bar\",
      encode: {
        x: \"产品\",
        y: \"销售额\"
      }
    }
  ]
}
\`\`\`

## 15. 栅格布局示例

### 使用cell组件布局 (12等分屏幕)

::: cell 6
### 大单元格 (6格宽)
这是一个较大的单元格，宽度占6格

可以包含任何 Markdown 语法：
- 列表项
- 图片
- 代码等
:::

::: cell 3
### 中等单元格 (3格宽)
中等大小的单元格

\`\`\`javascript
console.log('支持代码块');
\`\`\`
:::

::: cell 3
### 另一个中等单元格 (3格宽)
更多内容
- 项目A
- 项目B
- 项目C
:::

::: cell 4
### 宽单元格 (4格宽)
较宽的单元格
- 支持多行文本
- 自动换行
- 响应式布局
:::

::: cell 4
### 窄单元格 (4格宽)
较窄的单元格
- 简洁布局
- 高效利用空间
- 适合小内容
:::

### 包含图表和公式的布局

::: cell 4
### 图表示例
\`\`\`echarts
{
  "title": {"text": "小图表"},
  "tooltip": {},
  "xAxis": {"data": ["A","B","C"]},
  "yAxis": {
    "type": "value"
  },
  "series": [{"data": [1,2,3], "type": "bar"}]
}
\`\`\`
:::

::: cell 4
### Mermaid 示例
\`\`\`mermaid
graph TD
    A-->B
    A-->C
    B-->D
    C-->D
\`\`\`
:::

::: cell 4
### 数学公式
$$
E = mc^2
$$
:::
`
    }
  },
  methods: {
    handleRenderErrors(errors) {
      this.renderErrors = errors
      // 在控制台输出详细错误信息
      if (errors.length > 0) {
        console.group('📋 渲染错误列表')
        errors.forEach((error, index) => {
          console.group(`错误 ${index + 1}`)
          console.log(`行号: ${error.line}`)
          console.log(`类型: ${error.type}`)
          console.log(`消息: ${error.message}`)
          console.log(`代码片段:\n${error.code}`)
          console.groupEnd()
        })
        console.groupEnd()
      }
    }
  }
}
</script>

<style>
body {
  margin: 0;
}

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.toolbar {
  padding: 12px 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-right: 4px;
}

.toolbar-right {
  display: flex;
  align-items: center;
}

.toolbar-info {
  font-size: 13px;
  color: #666;
  padding: 4px 12px;
  background-color: #e9ecef;
  border-radius: 4px;
}

.toolbar button {
  padding: 6px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.toolbar button:hover {
  background-color: #f0f0f0;
  border-color: #bbb;
  transform: translateY(-1px);
}

.toolbar button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.toolbar button.active:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.editor-wrapper {
  flex: 1;
  overflow: hidden;
}

/* 错误面板样式 */
.error-panel {
  background-color: #fff3cd;
  border-bottom: 2px solid #ffc107;
  padding: 12px 16px;
  max-height: 200px;
  overflow-y: auto;
}

.error-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.error-title {
  font-weight: 600;
  color: #856404;
  font-size: 14px;
}

.error-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #856404;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  line-height: 20px;
  border-radius: 4px;
}

.error-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.error-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.error-item {
  background-color: white;
  border-left: 3px solid #dc3545;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
}

.error-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.error-line {
  background-color: #6c757d;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}

.error-type {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.error-type-echarts {
  background-color: #e3f2fd;
  color: #1976d2;
}

.error-type-dataset {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.error-type-mermaid {
  background-color: #e8f5e9;
  color: #388e3c;
}

.error-type-unknown {
  background-color: #fce4ec;
  color: #c2185b;
}

.error-message {
  color: #721c24;
  line-height: 1.5;
  margin-bottom: 4px;
}

.error-code {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 8px;
  margin: 4px 0 0 0;
  font-size: 11px;
  line-height: 1.4;
  overflow-x: auto;
  color: #495057;
}
</style>